<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chorme=1">
<meta name="viewport" content="target-densitydpi=medium-dpi,width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<link rel="stylesheet" href="css/swiper.css"/>
<link rel="stylesheet" href="css/fancybox.css"/>
<link rel="stylesheet" href="css/style.mobile.css"/>
<link rel="stylesheet" href="css/index.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/swiper.js"></script>
<script type="text/javascript" src="js/SuperSlide.js"></script>
<script type="text/javascript" src="js/change-html-fz.js"></script>
<script type="text/javascript" src="js/fancybox.js"></script>
<script type="text/javascript" src="js/simpler-sidebar.js"></script>
<script type="text/javascript" src="js/hSdrop.js"></script>
<style type="text/css">

.per_data .upload{
	padding: 0.2rem 0;
	font-size: 0.24rem;
	position: relative;
	line-height: 1.05rem;
	border-bottom: 1px solid #eeeeee;
}

.per_data .img{
	float: right;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	display: inline-block;
}
.per_data .img img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.per_data label{
	width: 100%;
	padding: 0.15rem 0;
	display: inline-block;
	border-bottom: 1px solid #eeeeee;
}
.per_data label span{
	float: left;
	width: 20%;
	height: .8rem;
	color: #333333;
	font-size: 0.24rem;
	line-height: .8rem;
	display: inline-block;
}
.per_data label input{
	width: 80%;
	border: 0;
	float: left;
	outline: none;
	height: .8rem;
	font-size: 0.24rem;
}
.per_data label input::placeholder{
	color: #AAAAAA;
	font-size: 0.24rem;
}

.per_data button.btn{
	border: 0;
	width: 80%;
	color: #FFFFFF;
	display: block;
	height: 0.68rem;
	font-size: 0.24rem;
	text-align: center;
	margin: 0.42rem auto;
	line-height: 0.68rem;
	border-radius: 0.06rem;
	background-color: #d72823;	
}

</style>
</head>
<body>

<div class="sidebar" id="dowebok">
	<div class="sidebar-wrapper" id="sidebar-wrapper">
		<ul class="nav">
			<li><a href="###">首页</a></li>
			<li><a href="###">资讯</a></li>
			<li><a href="###">品牌入驻</a></li>
			<li><a href="###">个人中心</a></li>
			<li><a href="###">我要代理</a></li>
			<li><a href="###">招商介绍</a></li>
			<li><a href="###">招商品牌展示</a></li>
		</ul>
	</div>
</div>
	
<div class="header">
	<div class="main clearfix">
		<div class="left"></div>
		<div class="center">
			<h2>个人资料</h2>
		</div>
		<div id="menu" class="menu"></div>
	</div>
</div>

<div class="per_data">
	<div class="main">
		<form action="">
			<div class="upload file clearfix">
				头像
				<div class="img">
					<img src="images/icon30.png" alt="" id="pictures" class="img_wrap">
				</div>
				<input type="file" id="upload" accept="image/*" capture="camera" multiple="multiple" >
			</div>
			<label><span>用户名</span> <input type="text" placeholder="请输入用户名"></label>
			<label><span>手机号</span> <input type="text" placeholder="请输入手机号"></label>
			<label><span>地址</span> <input type="text" placeholder="请输入详情地址"></label>
			<!-- <label><span>微信号</span> <input type="text" placeholder="微信号"></label> -->
			<button class="btn">提交</button>
		</form>
	</div>
</div>



<!-- 
<div class="view-container" style="overflow:auto">
	<div class="scroll-content">
		<form method="post" action="">
			<div class="item-content">
				<a href="javascript:void(0);" class="file">更换头像
					<input type="file" id="upload" accept="image/*" capture="camera">
				</a>
			</div>
		</form>
	</div>
</div> -->

<div class="loading">
	<div class="text_box">正在上传图片，请稍等</div>
</div>
<div class="err">
	<div class="text_box">上传失败</div>
</div>
<div class="succe">
	<div class="text_box">上传成功</div>
</div>


<div class="tab">
	<div class="clearfix">
		<div class="col-5 on"><a href="###">首页</a></div>
		<div class="col-5"><a href="###">品牌入驻</a></div>
		<div class="col-5"><a href="###">我要代理</a></div>
		<div class="col-5"><a href="###">资讯</a></div>
		<div class="col-5"><a href="###">我的</a></div>
	</div>
</div>
<script src="js/count.js"></script>
<script type="text/javascript">
	
	$('.upload').on('click',function(){
		$('.view-container').show();
	});
	
	$('.view-container').on("click",function(e){
		var target = $(e.target);
		if(target.closest("form").length == 0){
			$('.view-container').hide();
		}
	});
	
	let upload = {
		init: function() {
			this.eventBind();
		},
		eventBind: function() {
			var that = this;
			$("#upload").change(function() {
				var reader = new FileReader();
				reader.onload = function(e) {
					that.compress(this.result);
				};
				if(this.files.length==0){
					return;
				}else{
					reader.readAsDataURL(this.files[0]);
				};
			});
		},
		compress: function(res) {
			var that = this;
			var img = new Image(),
			maxH = 300;

			img.onload = function() {
				var cvs = document.createElement('canvas'),
				ctx = cvs.getContext('2d');

				if (img.height > maxH) {
					img.width *= maxH / img.height;
					img.height = maxH;
				}
				cvs.width = img.width;
				cvs.height = img.height;

				ctx.clearRect(0, 0, cvs.width, cvs.height);
				ctx.drawImage(img, 0, 0, img.width, img.height);
				var dataUrl = cvs.toDataURL('image/jpeg', 1);
				$(".img_wrap").attr("src", dataUrl);
				$(".img_wrap").show();
				that.upload(dataUrl);

				$('.view-container').hide();
			};

			img.src = res;
		},
		
		upload: function(image_data) {
			
		}
	};


	$(document).ready(function() {
		upload.init();
	});
</script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
